<template>
  <div class='dialog'>
    <!--visible是否显示 Dialog -->
    <!-- @close	Dialog 点x按钮时候触发的回调函数 -->
    <el-dialog :title="dialogTitle"
               @close="dialogClose"
               :visible="dialogFormVisible">
      <el-form :model="form"
               ref='dialogform'
               :rules="sturules">

        <el-form-item label="头像">
          <!-- name是后端要求的请求字段 -->
          <!--file-list 上传的文件列表用于存储图片地址 -->
          <el-upload class="uploadAvatar"
                     ref="uploadAvatar"
                     action="https://chst.vip/students/uploadStuAvatar"
                     list-type="picture-card"
                     :on-success="uploadSuccess"
                     :on-remove="removeAvatar"
                     :limit="limit"
                     name="headimgurl"
                     :file-list="headimgList"
                     :multiple="false">
            <i class="el-icon-plus"></i>
          </el-upload>

        </el-form-item>
        <el-form-item label="姓名"
                      prop="name">
          <el-input v-model="form.name"
                    autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="项目地址"
                      prop="productUrl">
          <el-input v-model="form.productUrl"
                    autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="班级"
                      prop="class">
          <el-input v-model="form.class"
                    autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="年龄"
                      prop="age">
          <el-input v-model="form.age"
                    autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="城市"
                      prop="city">
          <el-input v-model="form.city"
                    autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="学历"
                      prop="degree">
          <el-input v-model="form.degree"
                    autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="描述"
                      prop="description">
          <el-input v-model="form.description"
                    autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="HIDE_DIALOGVISIBLE">取 消</el-button>
        <!-- 将绑定在ref中的form组件传递给处理函数，这才能拿到form组件 -->
        <el-button type="primary"
                   @click="confirmDialog('dialogform')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { mapState, mapActions, mapMutations } from 'vuex'
  import { addstuinfo, updatestuinfo } from '../../api'
  export default {
    data() {
      return {
        //form表单数据
        form: {
          name: '',
          productUrl: '',
          class: '',
          age: '',
          city: '',
          degree: '',
          description: '',
          headimgurl: '',
        },
        //表单校验规则
        sturules: {
          name: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
          productUrl: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
          class: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
          age: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
          city: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
          degree: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
          description: [{ required: true, message: '内容不能为空', trigger: 'blur' }],

        },
        oldform: {},//存储form的初始值，便于以后清空dialog内容
        formLabelWidth: '120px',
        imageUrl: '',
        showAvatar: true,
        headimgList: [],//头像地址存放的数据
        limit: 2,//上传文件的数量
      }
    },
    //每次进入学员项目管理dialog组件就会被创建(因为挂载在product组件中)
    created() {
      //this.oldform = { ...this.form }
    },
    components: {
    },
    computed: {
      ...mapState(['dialogTitle', 'dialogFormVisible', 'editdialog']),
    },
    methods: {
      ...mapActions(['GET_STUDATA']),
      ...mapMutations(['SHOW_DIALOGVISIBLE', 'HIDE_DIALOGVISIBLE',
        'CHANGE_DAILOGTITLE']),
      // dialog关闭触发的回调函数
      dialogClose() {
        this.HIDE_DIALOGVISIBLE()
        this.headimgList = []
        this.form = {}
        //结束编辑的时候变为1
        this.limit = 1
      },
      //上传成功触发的回调
      uploadSuccess(u) {
        console.log(u);
        //把返回来的线上图片地址保存到vuex中
        if (u.state) {
          this.form.headimgurl = u.headimgurl
          //空头像直接上传就不需要删除再上传
          this.headimgList = [{ url: u.headimgurl }]
        } else {
          this.$message.error('上传头像失败')
        }

      },
      //头像移除触发的回调
      removeAvatar() {

      },
      //dialog确认按钮
      confirmDialog(dialogform) {
        //this都指向vue组件
        this.$refs[dialogform].validate((valid) => {
          //valid 布尔值代表通过
          if (valid) {
            //表单校验成功，关闭dialog
            this.HIDE_DIALOGVISIBLE()
            //发生请求，如何知道点击的dialog是编辑还是添加项目接口
            //判断dialogtitle内容来确认请求接口
            if (this.dialogTitle === '添加学员信息') {
              //发起添加api请求
              addstuinfo(this.form).then(res => {
                if (res.data.state) {
                  //增加成功,
                  //重新获取学员项目表格
                  this.GET_STUDATA()
                  this.$message.success('添加学院信息成功')
                } else {
                  this.$message.error('添加失败')
                }

              })
            } else {
              //发起编辑api请求,this.form就代表表单所有数据
              updatestuinfo(this.form).then(res => {
                console.log(res);
                if (res.data.state) {
                  this.GET_STUDATA()
                  this.$message.success('更新成功！！')
                } else {
                  //更新失败，别人也正在修改这条数据
                  this.$message.error('更新失败！')
                  this.GET_STUDATA()
                }

              })

            }
          } else {
            //表单校验失败
            this.$message.error('有必填项目没填')
          }
        })
      }
    },
    watch: {
      //监听回显的数据，因为每次编辑按钮都会修改vuex里的editdialog数据
      editdialog(newval) {
        //回显表单数据
        this.form = this.editdialog
        this.headimgList = [{ url: this.form.headimgurl }]
        //编辑的时候让上传图片数量变成2
        this.limit = 2
      }
    }
  }

</script>

<style lang='scss' scoped>
  .uploadAvatar {
  	text-align: left;
  }
  .el-upload-list__item.is-success,
  .el-upload--picture-card {
  	width: 100px !important;
  	height: 100px !important;
  	line-height: 100px !important;
  }
  .el-dialog__header {
  	padding: 0 !important;
  	line-height: 60px;
  }
</style>
